<template>
    <div
        style="width: 600px;margin:15% auto; padding:10px;box-sizing:  border-box; box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;  display:flex; flex-direction: column; align-items: center; justify-content: center;border-radius: 8px;">
        <div style="width: 100%;display:flex;justify-content: flex-end;"> <el-button type="success"
                @click="type = !type">
                {{ type ? '去注册' : '去登录' }}
            </el-button></div>
        <h2>CT影像肺炎诊断平台</h2>

        <el-form ref="sform" style="width:100%" :model="formData" :rules="formRules" label-width="auto">
            <el-form-item label="账号" prop="username">
                <el-input v-model="formData.username" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" type="password" />
            </el-form-item>

            <el-form-item>
                <el-button style="margin: 0 auto;" type="primary" @click="onSubmit()">
                    {{ type ? '登录' : '注册' }}
                </el-button>
                <div></div>
            </el-form-item>
        </el-form>




    </div>
</template>

<script lang="ts" setup>
import { login, register } from "@/api";
import { ref, reactive, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import storage from "@/utils/storage.ts";
const router = useRouter()
const type = ref<boolean>(true)
const { proxy } = getCurrentInstance() as any
const formData = reactive({
    username: null,
    password: null,
})
const formRules = reactive({
    username: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
    ],
})
const onSubmit = async () => {
    await proxy.$refs.sform.validate((valid: any) => {
        if (valid) {
            if (type.value) {
                try {
                    login(formData).then(res => {
                        if (res.code == 200) {
                            ElMessage.success('登录成功')
                            storage.set('token', res.data.token)
                            storage.set('userInfo', res.data.userInfo)
                            router.push('/home')
                        } else {
                            ElMessage.error('登录失败')
                        }
                    }).catch(err => {
                        ElMessage.warning(err.msg)
                    })
                } catch (error) {
                    ElMessage.error('登录错误')
                }
            } else {
                try {
                    register(formData).then(res => {
                        if (res.code == 200) {
                            ElMessage.success('注册成功')
                            type.value = true
                            proxy.$refs.sform.resetFields()
                        } else {
                            ElMessage.error('注册失败')
                        }
                    })
                } catch (error) {
                    ElMessage.error('注册错误')
                }
            }
            console.log('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>
